import { useState, useCallback } from "react";
import "./Choice.scss";

export default function Choice(props) {
  const { selection, handleChoice } = props;

  const [text, setText] = useState("");

  const handleText = useCallback((newText) => {
    setText(newText);
  }, []);
  return (
    <div className="choice">
      <div className="choice-text">{text}</div>
      <div className="choice-bars">
        {selection.map((item, key) => {
          return (
            <div
              key={key}
              onMouseMove={() => handleText(item.text)}
              onMouseLeave={() => handleText("")}
              onClick={() => handleChoice(item.go)}
              className="bar"
            ></div>
          );
        })}
      </div>
    </div>
  );
}
